<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onUnload,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import { uniFetch } from '../../api/uni-fetch';
	import OpenSkeleton from './components/OpenSkeleton';
	const props = defineProps(['id']);

	// 轮询订单状态
	const queryTimer = ref(null);
	const statusText = ref('加载中');
	const orderInfo = ref({

	});
	const skipTimer = ref(null);
	const isLoading = ref(true);
	async function getOrderStatus() {
		const orderStatus = await uniFetch.post('/order/status', {
			id: props.id
		});
		console.log(orderStatus);
		if (orderStatus.code === 10000) {
			orderInfo.value = orderStatus.data;
			if (orderStatus.data.lock_status === 3) {
				statusText.value = '长时间未开门，已上锁';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.$emit('endplay');
					uni.redirectTo({
						url: '/pages/endShopping/endShopping?orderId=' + orderInfo.value.id
					});
				}, 2000);
			} else if (orderStatus.data.lock_status === 99) {
				statusText.value = '开锁失败';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/index"
					});
				}, 2000);
			} else if (orderStatus.data.lock_status === 1 && orderStatus.data.pay_status === 0) {
				statusText.value = '欢迎光临';
				stutasPopup.value.close();
			} else if (orderStatus.data.lock_status === 2) {
				statusText.value = '购物结束';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.$emit('endplay');
					uni.redirectTo({
						url: '/pages/endShopping/endShopping?orderId=' + orderInfo.value.id
					});
				}, 2000);
			} else if (orderStatus.data.pay_status === 11) {
				statusText.value = '支付分未授权';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/index"
					});
				}, 2000);
			} else if (orderStatus.data.pay_status == 3) {
				statusText.value = '未开锁';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.$emit('endplay');
					uni.redirectTo({
						url: '/pages/endShopping/endShopping?orderId=' + orderInfo.value.id
					});
				}, 2000);
			} else if (orderStatus.data.lock_status === 1 && orderStatus.data.pay_status !== 0) {
				statusText.value = '请等待识别';
				successPopup.value.close();
				stutasPopup.value.open('center');
				skipTimer.value = setTimeout(() => {
					uni.$emit('endplay');
					uni.redirectTo({
						url: '/pages/endShopping/endShopping?orderId=' + orderInfo.value.id
					});
				}, 2000);
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: orderStatus.msg,
				duration: 3500
			});
			skipTimer.value = setTimeout(() => {
				uni.switchTab({
					url: "/pages/index/index"
				});
			}, 2000);
		}
	}
	getOrderStatus();
	queryTimer.value = setInterval(() => {
		getOrderStatus();
	}, 5000);

	const successPopup = ref(null);
	const countdownTimer = ref(null);
	watch(
		() => orderInfo.value.device_id,
		(newVal, oldVal) => {
			successPopup.value.open('center');
			console.log(newVal, oldVal, '2222@@@');
			timer.value = setTimeout(() => {
				successPopup.value.close();
			}, 2000);
			getGoodsList();
		}
	);


	// 获取商品列表
	const goodsList = ref([]);
	const timer = ref(null);
	const stutasPopup = ref(null);
	async function getGoodsList() {
		timer.value = setTimeout(() => {
			successPopup.value.close();
		}, 2000);
		if (props.id) {
			const res = await uniFetch.post('/device/stock', {
				deviceId: orderInfo.value.device_id
			});
			if (res.code === 10000) {
				isLoading.value = false;
				if (res.data.length) {
					while (res.data.length > 0) {
						goodsList.value.push(res.data.splice(0, 3));
					}
					console.log(goodsList.value);
				} else {
					const res = await uniFetch.post('/device/supply-goods', {
						deviceId: orderInfo.value.device_id
					});
					if (res.code === 10000) {
						while (res.data.length > 0) {
							goodsList.value.push(res.data.splice(0, 3));
						}
					} else {
						uni.showToast({
							title: '获取列表失败',
							icon: 'none'
						});
					}
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				timer.value = setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/index"
					});
				}, 2000);
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: '订单id-404'
			});
		}
	}

	// 获取设备基本信息
	const deviceInfo = ref({});
	async function geDeviceInfo() {
		if (!uni.getStorageSync('machineId')) return;
		const res = await uniFetch.post('/device/detail', {
			box_id: uni.getStorageSync('machineId')
		});
		if (res.code === 10000) {
			deviceInfo.value = res.data;
		}
	}
	geDeviceInfo();

	let innerAudioContext = {};

	function playMusic() {
		// #ifdef MP-WEIXIN
		innerAudioContext = wx.createInnerAudioContext({
			useWebAudioImplement: true
		});
		// #endif
		// #ifdef MP-ALIPAY
		innerAudioContext = uni.createInnerAudioContext();
		// #endif
		innerAudioContext.src = 'https://dmg.nex-i.cn/res/wx/music1.mp3';
		innerAudioContext.autoplay = true;
		innerAudioContext.play();
		innerAudioContext.onError((err) => {
			console.log(err, 'errrrrrrrrrrrrr');
		});
	}

	onShow(() => {
		uni.$on('play', function(data) {
			innerAudioContext.src = 'https://dmg.nex-i.cn/res/wx/music1.mp3';
			innerAudioContext.autoplay = true;
			innerAudioContext.play();
		});
	});

	onLoad(() => {
		playMusic();
	});

	onUnload(() => {
		// innerAudioContext.value.stop();
		if (innerAudioContext.src) {
			innerAudioContext.src = '';
			innerAudioContext.autoplay = false;
			innerAudioContext.stop();
			innerAudioContext.pause();
			innerAudioContext = undefined;
		}
		clearTimeout(timer.value);
		clearTimeout(skipTimer.value);
		clearInterval(queryTimer.value);
		clearInterval(countdownTimer.value);
	});
</script>

<template>

	<uni-popup ref="stutasPopup" type="center">
		<LoadingUnit isBgc>{{ statusText }}</LoadingUnit>
	</uni-popup>

	<uni-popup ref="successPopup" type="center" mask-background-color="#00000000">
		<LoadingSuccess></LoadingSuccess>
	</uni-popup>
	<view v-if="!isLoading" class="page " style='background-color: #eaeaea;'>
		<uni-notice-bar style="position: fixed; top: 0; left: 0; width: 100vw" color="#595857" scrollable show-icon
			text="设备已开门,左边打开门,一次可以购买多个商品,选购后请关好门" />

		<view class="mt130 mb30">
			<view class="shopping-tips">
				<view class="logo">
					<image src="/static/logo.png"></image>
				</view>
				<view class="tips-title">
					<view>门锁已开</view>
					<view>请打开门开始购物</view>
				</view>
				<view class="content">
					<view class="item">请勿让他人拿取商品</view>
					<view class="item">请勿放回使用后的商品</view>
					<view class="item">请勿放入私人用品</view>
					<view class="item">关门时请确认锁已关，避免造成额外损失</view>
				</view>
			</view>
		</view>
		<view class="card-list">
			<uni-section class="mb-10" title="库存列表" type="line" style="margin-bottom: 25rpx"></uni-section>
			<view class="list-row" v-for="goodsGroup in goodsList" :key="goodsGroup">
				<view class="goods-item" v-for="item in goodsGroup" :key="item.id">
					<view style="width: 150rpx; margin: 0 auto">
						<image :src="item.banner" mode="heightFix"></image>
					</view>
					<view class="goods-name">{{ item.name }}</view>
					<view class="goods-inventory">
						<text>库存</text>
						<text style="color: #191919; font-size: 28rpx; padding-left: 10rpx">{{ item.count }}</text>
					</view>
					<view class="goods-price">
						<view><text style="font-size: 22rpx">¥</text>
							<text>
								{{ item?.is_discount ? item?.discount_price : item?.price }}
							</text>
						</view>
						<view class="discount" v-if="item?.is_discount">
							<text class="discount_zhe"> 折 </text>
						</view>
						<view v-if="item?.is_discount" class="discount_price">
							<text> ¥{{ item.price }} </text>
						</view>
					</view>
				</view>
			</view>

			<view style="background-color: #fff" v-if="!goodsList.length">
				<Empty text="商品列表为空"></Empty>
			</view>
		</view>

		<!-- 	<view class="card" style="height: 73vh">
			<view class="title">商品详情</view>

			<scroll-view scroll-y="true" style="height: 63vh">
				<view style="padding-bottom: 50rpx; padding-top: 10rpx">
					<view class="goods-item" v-for="item in 20">
						<image src="/static/logo.png" mode="widthFix"></image>
						<view class="goods-info">
							<view class="item">
								<text class="title">品名：</text>
								<text class="hidden">可口可乐可口可乐可口可乐可口可乐可口可乐可口可乐</text>
							</view>
							<view class="item">
								<text class="title">售价：</text>
								<text class="hidden" style="color: #ff0000">
									<text style="fontsize: 32rpx">￥</text>
									10.00
								</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- <view>
			<view class="pp" style="--delay: 0s"></view>
			<view class="pp" style="--delay: 0.3s"></view>
			<view class="pp" style="--delay: 0.5s"></view>
			<view class="pp" style="--delay: 0.7s"></view>
			<view class="pp" style="--delay: 0.8s"></view>
			<view class="pp" style="--delay: 1.1s"></view>
		</view> -->
	</view>
	<view class="" v-else>
		<OpenSkeleton></OpenSkeleton>
	</view>
</template>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	::v-deep .uni-section {
		background-color: transparent !important
	}

	.shopping-tips {
		position: relative;
		padding: 100rpx 75rpx 60rpx;
		background: linear-gradient(180deg, rgba(119, 170, 252, 1) 0%, rgba(255, 255, 255, 1) 60%);
		border-radius: 25rpx;

		.logo {
			position: absolute;
			top: -80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 160rpx;
			height: 160rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	z-index: 99;
			// 	top: 0rpx;
			// 	left: 0rpx;
			// 	width: 154rpx;
			// 	height: 154rpx;
			// 	border: 6rpx solid #EDF0F0;
			// 	border-radius: 50%;
			// 	box-shadow: #EDF0F0 1px 1px 10rpx 3rpx;
			// }
		}

		.countdown {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
			display: flex;
			align-items: center;
			border-radius: 40rpx;
			border: 1rpx solid #fff;
		}

		.tips-title {
			padding-bottom: 40rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.item {
			display: flex;
			width: 23em;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #737373;

			&:before {
				content: '';
				display: inline-block;
				margin-right: 20rpx;
				margin-top: 15rpx;
				background-color: #fff;
				height: 30rpx;
				width: 30rpx;
				border-radius: 50%;
				border: 10rpx solid #5686de;
				box-sizing: border-box;
				flex-shrink: 0;
				flex-grow: 0;
			}
		}
	}

	.page {
		position: relative;
		z-index: 0;
		width: 100vw;
		min-height: 100vh;
		padding: 40rpx 25rpx;
		overflow: hidden;

		.device-info {
			// background-color: pink;
			display: flex;

			.avatar {
				width: 12vh;
				height: 12vh;
				border-radius: 50%;
				background: #ffffff;
				box-shadow: 0rpx 3.57rpx 7.14rpx #00000055;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;

				.avatar-nei {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 11vh;
					height: 11vh;
					border: 2rpx solid #91e7f2b5;
					border-radius: 50%;
					overflow: hidden;
					backdrop-filter: blur(5rpx);

					image {
						width: 105%;
					}
				}
			}

			.info {
				display: flex;
				flex-direction: column-reverse;
				margin-left: 37rpx;
				width: 450rpx;
				padding-bottom: 20rpx;

				justify-content: center;
				// .open-door {
				// 	padding-top: 40rpx;
				// 	color: #2c000c;
				// 	font-size: 60rpx;

				// 	text {
				// 		position: relative;

				// 		&:before {
				// 			content: '>>>>';
				// 			position: absolute;
				// 			left: 0;
				// 			width: 0;
				// 			white-space: nowrap;
				// 			color: #fff;
				// 			animation: jianbian 2s steps(1,end) infinite;
				// 			overflow: hidden;
				// 			// background-color: pink;
				// 			@keyframes jianbian {
				// 				0% {
				// 					width: 0;
				// 				}
				// 				25% {
				// 					width: 33%;
				// 				}
				// 				50% {
				// 					width: 66%;
				// 				}
				// 				75%{
				// 					width: 100%;
				// 				}
				// 				100% {
				// 					width: 0%;
				// 				}
				// 			}
				// 		}
				// 	}
				// }

				.info-item {
					width: 500rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					// background-color: pink;
					.title {
						font-size: 36rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 41.38rpx;
						color: #f08a10;
					}

					// .data {
					// 	font-size: 35.71rpx;
					// 	font-weight: 400;
					// 	line-height: 52rpx;
					// 	color: rgba(0, 0, 0, 1);
					// 	width: 135rpx;
					// }
				}
			}
		}

		.address {
			// padding-top: 25rpx;
			margin-left: 37rpx;
			display: flex;
			align-items: center;
			height: 5vh;

			// background-color: green;
			image {
				height: 50%;
				margin-right: 15rpx;
				// margin-left: 20rpx;
			}

			.data {
				font-size: 26rpx;
				// line-height: 42rpx;
				color: #b5b6b6;
			}
		}

		.list-title {
			margin-left: 20rpx;
			background-color: #f08300;
			color: #fefefe;
			padding: 0 25rpx;
			width: fit-content;
			height: 55rpx;
			line-height: 55rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
		}

		.card-list {
			padding-top: 30rpx;

			.list-row {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx 0;

				.goods-item {
					width: 33%;

					image {
						margin: 0 auto;
						height: 150rpx;
					}

					.goods-name {
						font-size: 23rpx;
						color: #666666;
						line-height: 33rpx;
						height: 66rpx;
						width: 170rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin: 0 auto;
					}

					.goods-inventory {
						color: #b2b2b2;
						font-size: 16rpx;
						width: 170rpx;
						margin: 0 auto;
					}

					.goods-price {
						width: 170rpx;
						font-size: 33rpx;
						color: #ff0101;
						margin: 0 auto;
						display: flex;
						flex-direction: row;
						align-items: flex-end;

						.discount {
							margin: 0 6rpx;

							&_zhe {
								font-size: 24rpx;
								background: orange;
								padding: 4rpx 6rpx;
								border-radius: 10rpx;
								color: white;
							}
						}

						.discount_price {
							text-decoration: line-through;
							font-size: 24rpx;
							color: #ababab;
						}
					}


				}
			}
		}

		// .card {
		// 	position: relative;
		// 	z-index: 99;
		// 	padding: 20rpx 25rpx;
		// 	backdrop-filter: blur(5rpx);
		// 	border-radius: 65rpx;
		// 	background-color: #ffffff72;
		// 	margin-bottom: 50rpx;
		// 	color: #000;
		// 	box-shadow: 5.36rpx 8.93rpx 42.86rpx #188ff028;

		// 	.title {
		// 		font-size: 43rpx;
		// 		font-weight: 400;
		// 		line-height: 62rpx;
		// 		color: rgba(0, 85, 255, 1);
		// 		text-align: center;
		// 		height: 6vh;
		// 	}
		// 	.goods-item {
		// 		display: flex;
		// 		align-items: center;
		// 		// width: 97%;
		// 		height: 150rpx;
		// 		// border: 1rpx solid #78a1ff55;
		// 		border-radius: 20rpx;
		// 		background: linear-gradient(270deg, #87c5ffcc 0%, #cccaff99 101%);
		// 		box-shadow: inset 3.49px 2.62px 30px 0.87px #ffffff44;
		// 		// box-shadow: 3.49px 2.62px 7.85px 0.87px #0b21e33f;
		// 		margin-bottom: 15rpx;
		// 		padding-left: 40rpx;
		// 		image {
		// 			width: 107rpx;
		// 			height: 107rpx;
		// 			border-radius: 10rpx;
		// 		}
		// 		.goods-info {
		// 			margin-left: 27rpx;
		// 			.item {
		// 				height: 51rpx;
		// 				.title {
		// 					font-size: 29rpx;
		// 					color: #070f21ee;
		// 				}
		// 				.hidden {
		// 					vertical-align: middle;
		// 					display: inline-block;
		// 					width: 350rpx;
		// 					overflow: hidden;
		// 					text-overflow: ellipsis;
		// 					white-space: nowrap;
		// 					color: #020536;
		// 					font-size: 34rpx;
		// 				}
		// 			}
		// 		}
		// 	}
		// }

		// .pp {
		// 	position: absolute;
		// 	z-index: 1;
		// 	width: 50rpx;
		// 	height: 50rpx;
		// 	background-color: #fff;
		// 	border-radius: 50%;
		// 	opacity: 0.5;
		// 	left: 0;
		// 	bottom: -200rpx;
		// 	box-shadow: inset 10rpx 10rpx 10px #89c2f0;
		// 	animation: flying 9s ease-in infinite;
		// 	@keyframes flying {
		// 		0% {
		// 			bottom: -200rpx;
		// 			transform: translateX(0rpx);
		// 		}
		// 		50% {
		// 			transform: translateX(100rpx);
		// 		}
		// 		100% {
		// 			bottom: 2000rpx;
		// 			transform: translateX(-300rpx);
		// 		}
		// 	}
		// 	&:nth-child(1) {
		// 		left: 30%;
		// 		width: 60rpx;
		// 		height: 60rpx;
		// 		background-color: #ffffff44;
		// 		animation-duration: 3s;
		// 		animation-delay: var(--delay);
		// 	}
		// 	&:nth-child(2) {
		// 		left: 10%;
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 		background-color: #ffffff33;
		// 		animation-duration: 5s;
		// 		animation-delay: var(--delay);
		// 	}
		// 	&:nth-child(3) {
		// 		left: 20%;
		// 		width: 80rpx;
		// 		height: 80rpx;
		// 		background-color: #ffffff99;
		// 		animation-duration: 6s;
		// 		animation-delay: var(--delay);
		// 	}
		// 	&:nth-child(4) {
		// 		left: 90%;
		// 		width: 100rpx;
		// 		height: 100rpx;
		// 		background-color: #ffffff99;
		// 		animation-duration: 6.6s;
		// 		animation-delay: var(--delay);
		// 	}
		// 	&:nth-child(5) {
		// 		left: 50%;
		// 		width: 70rpx;
		// 		height: 70rpx;
		// 		background-color: #ffffffee;
		// 		animation-duration: 5s;
		// 		animation-delay: var(--delay);
		// 	}
		// 	&:nth-child(6) {
		// 		left: 80%;
		// 		width: 30rpx;
		// 		height: 30rpx;
		// 		background-color: #ffffffee;
		// 		animation-duration: 4s;
		// 		animation-delay: var(--delay);
		// 	}
		// }
	}
</style>